<template>
    <div>
        <!-- 导航部分开始 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>生产管理</el-breadcrumb-item>
            <el-breadcrumb-item>工序设置</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 导航部分结束 -->

        <el-divider />


        <!-- 搜索栏开始 -->
        <el-form style="margin-top: 15px;" :inline="true" :model="searchWorkOrder" class="demo-form-inline">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="工单编码">
                        <el-input v-model="searchWorkOrder.workOrderCode" placeholder="请输入工单编码" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="工单名称">
                        <el-input v-model="searchWorkOrder.workOrderName" placeholder="请输入工单名称" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="来源单据">
                        <el-input v-model="searchWorkOrder.orderSource" placeholder="请输入来源单据" clearable />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="产品编号">
                        <el-input v-model="searchWorkOrder.productCode" placeholder="请输入产品编号" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="产品名称">
                        <el-input v-model="searchWorkOrder.productName" placeholder="请输入产品名称" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="客户编码">
                        <el-input v-model="searchWorkOrder.clientCode" placeholder="请输入客户编码" clearable />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="客户名称">
                <el-input v-model="searchWorkOrder.clientName" placeholder="请输入客户名称" clearable />
            </el-form-item>
            <el-form-item label="需求日期">
                <el-date-picker v-model="searchWorkOrder.requestDate" value-format="YYYY-MM-DD" type="date"
                    placeholder="请选择需求日期" :size="size" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSeach">搜索</el-button>
                <el-button @click="handleReset"><el-icon>
                        <refresh />
                    </el-icon>重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 搜索栏结束 -->

        <!-- 工具栏开始 -->
        <div class="flex">
            <el-button title="新增工单" @click="this.addWorkOrderDialogVisible = true" type="primary"><el-icon>
                    <Plus />
                </el-icon></el-button>
            <el-button @click="handlerDeleteDicts" title="删除选中工单" type="primary" disabled><el-icon>
                    <Delete />
                </el-icon></el-button>
            <el-button @click="handlerEditDicts" title="导出工单" type="primary"><el-icon>
                    <Download />
                </el-icon></el-button>
        </div>
        <!-- 工具栏结束 -->

        <!-- 表格树 开始 -->
        <el-table ref="workOrderTable" :data="workOrders" stripe="true" border="true" default-expand-all="isShowAll"
            row-key="workOrderId" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            style="width: 100%;margin-top: 10px;">
            <el-table-column width="200" label="工单编码" property="workOrderCode">
                <template #default="scope">
                    <el-link type="success" @click="showWorkOrderData(scope.row.workOrderId)">
                        {{ scope.row.workOrderCode }}
                    </el-link>
                </template>
            </el-table-column>
            <el-table-column width="200" label="工单名称" property="workOrderName" />
            <el-table-column width="100" label="工单来源" property="orderSource" />
            <el-table-column width="100" label="订单编号" property="sourceCode" />
            <el-table-column width="200" label="产品编号" property="productCode" />
            <el-table-column width="100" label="产品名称" property="productName" />
            <el-table-column width="100" label="单位" property="unitOfMeasure" />
            <el-table-column width="100" label="工单数量" property="quantity" />
            <el-table-column width="100" label="调整数量" property="quantityChanged" />
            <el-table-column width="100" label="已生产的数量" property="quantityScheduled" />
            <el-table-column width="100" label="批次号" property="batchCode" />
            <el-table-column width="100" label="客户编码" property="clientCode" />
            <el-table-column width="100" label="客户名称" property="clientName" />
            <el-table-column width="200" label="需求日期" property="requestDate" />
            <el-table-column width="100" label="单据状态" property="status">
            </el-table-column>
            <el-table-column width="200" align="center" label="操作">
                <template #default="scope">
                    <div v-if="scope.row.status == '草稿'">
                        <el-button size="small" type="primary" @click="handleEdit(scope.row)">修改</el-button>
                        <el-popconfirm confirm-button-text="是" cancel-button-text="点错了" @confirm="handleDelete(scope.row)"
                            title="您是否要删除这行数据">
                            <template #reference>
                                <el-button size="small" type="danger">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </div>
                    <div v-if="scope.row.status == '已确认'">
                        <el-button size="small" type="info" @click="handleAddSon(scope.row)">新增</el-button>
                        <el-button size="small" type="success" @click="handleFinish(scope.row)">完成</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- 表格树 结束 -->

        <!-- 完成按钮的弹窗 -->
        <el-dialog v-model="FinishDialogVisible" title="系统提示" width="30%" draggable>
            <span><el-icon>
                    <WarnTriangleFilled />
                </el-icon>确认完成工单？一旦完成，此工单将无法继续报工</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="FinishDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="Finish()">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 添加生产工单根节点的弹窗窗体开始-->
        <el-dialog v-model="addWorkOrderDialogVisible" title="添加生产工单" width="1000" align-center>
            <!-- 编辑分类的表单 -->
            <el-form label-width="100px" :model="addWorkOrder" style="max-width: 960px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="工单编码">
                            <el-input v-model="addWorkOrder.workOrderCode" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="工单名称">
                            <el-input v-model="addWorkOrder.workOrderName" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="来源类型">
                            <el-radio-group v-model="addWorkOrder.orderSource">
                                <el-radio label="客户订单">客户订单</el-radio>
                                <el-radio label="库存备货">库存备货</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item v-if="addWorkOrder.orderSource == '客户订单'" label="订单编号">
                            <el-input v-model="addWorkOrder.sourceCode" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="单据状态">
                            <el-input v-model="addWorkOrder.status" placeholder="草稿" disabled />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="产品编码">
                            <el-input v-model="addWorkOrder.productCode">
                                <template #append>
                                    <el-button @click="this.bomAddItemDialogVisible = true">
                                        <el-icon>
                                            <Search />
                                        </el-icon></el-button>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="产品名称">
                            <el-input v-model="addWorkOrder.productName" disabled />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="单位">
                    <el-input v-model="addWorkOrder.unitOfMeasure" disabled />
                </el-form-item>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="工单数量" style="width: 300px;">
                            <el-input-number v-model="addWorkOrder.quantity" :min="1" :max="100" @change="handleChange" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="需求日期">
                            <el-date-picker v-model="addWorkOrder.requestDate" value-format="YYYY-MM-DD" type="date"
                                placeholder="请选择需求日期" :size="size" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="批次号">
                            <el-input v-model="addWorkOrder.batchCode" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="备注" style="width: 800px;">
                    <el-input type="textarea" :rows="3" v-model="addWorkOrder.remark" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="doAddWorkOrder">确定</el-button>
                    <el-button @click="cancelAddWorkOrder">取消</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 添加生产工单根节点的弹窗窗体结束 -->

        <!-- 编辑生产工单的弹窗窗体开始-->
        <el-dialog v-model="updateWorkOrderDialogVisible" title="修改生产工单" width="1000" align-center>
            <!-- 编辑分类的表单 -->
            <div>
                <el-form label-width="100px" :model="updateWorkOrder" style="max-width: 960px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="工单编码">
                                <el-input v-model="updateWorkOrder.workOrderCode" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="工单名称">
                                <el-input v-model="updateWorkOrder.workOrderName" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="来源类型">
                                <el-radio-group v-model="updateWorkOrder.orderSource">
                                    <el-radio label="客户订单">客户订单</el-radio>
                                    <el-radio label="库存备货">库存备货</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item v-if="updateWorkOrder.orderSource == '客户订单'" label="订单编号">
                                <el-input v-model="updateWorkOrder.sourceCode" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="单据状态">
                                <el-input v-model="updateWorkOrder.status" disabled />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="产品编码">
                                <el-input v-model="updateWorkOrder.productCode">
                                    <template #append>
                                        <el-button @click="this.bomAddItemDialogVisible = true">
                                            <el-icon>
                                                <Search />
                                            </el-icon></el-button>
                                    </template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="产品名称">
                                <el-input v-model="updateWorkOrder.productName" disabled />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="单位">
                        <el-input v-model="updateWorkOrder.unitOfMeasure" disabled />
                    </el-form-item>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="工单数量" style="width: 300px;">
                                <el-input-number v-model="updateWorkOrder.quantity" :min="1" :max="100"
                                    @change="handleChange" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="需求日期">
                                <el-date-picker v-model="updateWorkOrder.requestDate" value-format="YYYY-MM-DD" type="date"
                                    placeholder="请选择需求日期" :size="size" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="批次号">
                                <el-input v-model="updateWorkOrder.batchCode" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="备注" style="width: 800px;">
                        <el-input type="textarea" :rows="3" v-model="updateWorkOrder.remark" />
                    </el-form-item>
                </el-form>
            </div>
            <el-tabs type="border-card">
                <el-tab-pane label="BOM组成">
                    <div class="flex">
                        <el-button @click="handlerEditDicts" title="导出工单" type="primary"><el-icon>
                                <Download />
                            </el-icon></el-button>
                    </div>
                    <el-table ref="workOrderBomTable" :data="workOrderBoms" stripe="true" border="true"
                        style="width: 100%;margin-top: 10px;">
                        <el-table-column align="center" type="selection" width="55" />
                        <el-table-column align="center" label="BOM物料编号" property="itemCode" />
                        <el-table-column align="center" label="BOM物料名称" property="itemName" />
                        <el-table-column align="center" label="规格型号" property="itemSpec" />
                        <el-table-column align="center" label="单位" property="unitOfMeasure" />
                        <el-table-column align="center" label="物料/产品" property="itemOrProduct" />
                        <el-table-column align="center" label="预计使用量" property="quantity" />
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="物料需求">Config</el-tab-pane>
            </el-tabs>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="doEditWorkOrder">确定</el-button>
                    <el-button type="success" @click="updateFinishDialogVisible = true">完成</el-button>
                    <el-button @click="cancelUpdateWorkOrder">取消</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 编辑生产工单的弹窗窗体结束 -->

        <!-- 修改完成按钮的弹窗 -->
        <el-dialog v-model="updateFinishDialogVisible" title="系统提示" width="30%" draggable>
            <span><el-icon>
                    <WarnTriangleFilled />
                </el-icon>是确认完成工单编制?【确认后将不能更改】</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="updateFinishDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="updateFinish()">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>

        <!-- bom新增物料产品的弹窗窗体开始-->
        <el-dialog v-model="bomAddItemDialogVisible" title="BOM组成选择" width="1200" style="height: 800px;">
            <el-container>
                <el-aside width="200">
                    <!-- 分类树 -->
                    <el-tree ref="tree" :data="itemTypes" :expand-on-click-node="false" node-key="itemTypeId"
                        :props="defaultProps" @node-click="optionItemByTree" default-expand-all style="margin-top: 70px;" />
                </el-aside>

                <el-main width="1000">
                    <!-- 搜索栏开始 -->
                    <el-form :inline="true" :model="search">
                        <el-form-item label="物料编码">
                            <el-input v-model="search.itemCode" placeholder="请输入物料编码" />
                        </el-form-item>
                        <el-form-item label="物料名称">
                            <el-input v-model="search.itemName" placeholder="请输入物料名称" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="loadItem"><el-icon>
                                    <search />
                                </el-icon>搜索</el-button>
                            <el-button @click="handleReset"><el-icon>
                                    <refresh />
                                </el-icon>重置</el-button>
                        </el-form-item>
                    </el-form>
                    <!-- 搜索栏结束 -->
                    <!-- 新增BOM表格 开始 -->
                    <el-table ref="addBOMTable" :data="items">
                        <el-table-column type="selection" width="55" />
                        <el-table-column label="物料编码" property="itemCode" width="90" />
                        <el-table-column label="物料名称" property="itemName" width="120" />
                        <el-table-column label="规格型号" property="specification" width="100" />
                        <el-table-column label="单位" property="unitOfMeasure" width="70" />
                        <el-table-column label="物料/产品" property="itemOrProduct" width="110" />
                        <el-table-column label="所属分类" property="itemTypeName" width="100" />
                        <el-table-column label="创建时间" :formatter="timeFormatter" property="createTimeMillis" />
                    </el-table>
                    <!-- 新增BOM表格 结束 -->
                    <!-- 分页栏开始 -->
                    <el-pagination style="margin-top: 15px;" :page-size="10" :pager-count="maxPageNum"
                        @current-change="changePage" background layout="prev, pager, next" :total="total" />
                    <!-- 分页栏结束 -->
                </el-main>
            </el-container>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancelAddBOM">取消</el-button>
                    <el-button type="primary" @click="doAddBOM">添加</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 新增物料产品的弹窗窗体结束 -->

        <!-- 展示工单详情信息的弹窗开始-->
        <el-dialog v-model="workOrderDataManagerDialogVisible" title="查看工单详情信息" width="80%" align-center>
            <!-- 展示工单详情信息的表单 -->
            <el-form label-width="100px" :model="showWorkOrder" style="max-width: 960px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="工单编码">
                            <el-input v-model="showWorkOrder.workOrderCode" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="工单名称">
                            <el-input v-model="showWorkOrder.workOrderName" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="来源类型">
                            <el-radio-group v-model="showWorkOrder.orderSource">
                                <el-radio label="客户订单">客户订单</el-radio>
                                <el-radio label="库存备货">库存备货</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item v-if="showWorkOrder.orderSource == '客户订单'" label="订单编号">
                            <el-input v-model="showWorkOrder.sourceCode" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="单据状态">
                            <el-input v-model="showWorkOrder.status" disabled />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="产品编码">
                            <el-input v-model="showWorkOrder.productCode">
                                <template #append>
                                    <el-button @click="this.bomAddItemDialogVisible = true">
                                        <el-icon>
                                            <Search />
                                        </el-icon></el-button>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="产品名称">
                            <el-input v-model="showWorkOrder.productName" disabled />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="单位">
                    <el-input v-model="showWorkOrder.unitOfMeasure" disabled />
                </el-form-item>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="工单数量" style="width: 300px;">
                            <el-input-number v-model="showWorkOrder.quantity" :min="1" :max="100" @change="handleChange" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="需求日期">
                            <el-date-picker v-model="showWorkOrder.requestDate" value-format="YYYY-MM-DD" type="date"
                                placeholder="请选择需求日期" :size="size" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="批次号">
                            <el-input v-model="showWorkOrder.batchCode" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="备注" style="width: 800px;">
                    <el-input type="textarea" :rows="3" v-model="showWorkOrder.remark" />
                </el-form-item>
            </el-form>
            <el-tabs type="border-card">
                <el-tab-pane label="BOM组成">
                    <div class="flex">
                        <el-button @click="handlerEditDicts" title="导出工单" type="primary"><el-icon>
                                <Download />
                            </el-icon></el-button>
                    </div>
                    <el-table ref="workOrderBomTable" :data="workOrderBoms" stripe="true" border="true"
                        style="width: 100%;margin-top: 10px;">
                        <el-table-column align="center" type="selection" width="55" />
                        <el-table-column align="center" label="BOM物料编号" property="itemCode" />
                        <el-table-column align="center" label="BOM物料名称" property="itemName" />
                        <el-table-column align="center" label="规格型号" property="itemSpec" />
                        <el-table-column align="center" label="单位" property="unitOfMeasure" />
                        <el-table-column align="center" label="物料/产品" property="itemOrProduct" />
                        <el-table-column align="center" label="预计使用量" property="quantity" />
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="物料需求">Config</el-tab-pane>
            </el-tabs>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="cancelShowWorkOrder">返回</el-button>
                    <el-button @click="cancelShowWorkOrder">取消</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 展示工单详情信息的弹窗结束-->
    </div>
</template>
<script>
import workorderRequest from '../../../api/pro-workorder-api';
import workOrderBomRequest from '../../../api/pro-workOrderBom';
import itemTypeRequest from '../../../api/mdItemType-api.js';
import itemRequest from '../../../api/mdItem-api.js';
export default {
    data() {
        return {
            searchWorkOrder: {},
            workOrders: [],
            defaultProps: {
                children: 'children',// 孩子节点集合的属性名
                label: 'workOrderCode',// 对应的文本的属性名
            },
            isShowAll: true,// 默认展示所有数据

            //编辑工序属性
            updateWorkOrder: {},
            updateWorkOrderDialogVisible: false,
            //物料弹窗
            bomAddItemDialogVisible: false,
            bomAddItem: {}, // bom组成新增的对象
            itemTypes: [],// 分类菜单的所有数据
            defaultProps: {
                children: 'children',// 孩子节点集合的属性名
                label: 'itemTypeName',// 对应的文本的属性名
            },
            page: 1, // 页数
            limit: 10, // 每页条数
            total: 0, // 总条数
            maxPageNum: 1, // 最大页数
            items: [], // 查询到的数据
            search: {},// 搜索栏对象
            currItemId: {},

            //添加工序子节点的属性
            addWorkOrderDialogVisible: false,
            addWorkOrder: {},
            currParentId: {},

            //展示工单信息
            showWorkOrder: {},
            workOrderDataManagerDialogVisible: false,

            //完成按钮属性
            updateFinishDialogVisible: false,

            FinishDialogVisible: false,

            workOrderBoms: [],

        }
    },
    methods: {
        /**
    * 编辑按钮事件
    */
        handleFinish(row) {
            this.FinishDialogVisible = true;
            workorderRequest.get(row.workOrderId, res => {
                this.updateWorkOrder = res.data;
            })
        },
        Finish() {
            this.updateWorkOrder.status = "已完成";
            console.log(this.updateWorkOrder);
            workorderRequest.edit(this.updateWorkOrder, res => {
                // 这里的res就是我们的后端返回的perResult对象
                if (res.code == '200') {
                    this.$message({
                        message: '编辑用户成功',
                        type: 'success'
                    });
                    //关闭窗体
                    this.updateWorkOrderDialogVisible = false;
                    this.FinishDialogVisible = false;
                    // 重新加载数据
                    this.loadWorkOrder(true);
                } else if (res.code == '300') {
                    this.$message({
                        message: '用户名重复',
                        type: 'warning',
                    });
                } else {
                    this.$message({
                        message: '编辑失败',
                        type: 'error',
                    });
                }
            });


        },
        updateFinish() {
            this.updateWorkOrder.status = "已确认";
            workorderRequest.edit(this.updateWorkOrder, res => {
                // 这里的res就是我们的后端返回的perResult对象
                if (res.code == '200') {
                    this.$message({
                        message: '编辑用户成功',
                        type: 'success'
                    });
                    //关闭窗体
                    this.updateWorkOrderDialogVisible = false;
                    this.updateFinishDialogVisible = false;
                    // 重新加载数据
                    this.loadWorkOrder(true);
                } else if (res.code == '300') {
                    this.$message({
                        message: '用户名重复',
                        type: 'warning',
                    });
                } else {
                    this.$message({
                        message: '编辑失败',
                        type: 'error',
                    });
                }
            });
        },
        /**
         * 点击工单编码，显示工单详情信息
         * @param {*} workOrderId 
         */
        showWorkOrderData(workOrderId) {
            workorderRequest.get(workOrderId, res => {
                this.showWorkOrder = res.data;
            });
            this.workOrderDataManagerDialogVisible = true;
            this.loadWorkOrderBom(workOrderId);
        },
        /**
   * 取消查看生产工单的按钮事件
   */
        cancelShowWorkOrder() {
            // 关闭窗体
            this.workOrderDataManagerDialogVisible = false;
        },

        /**
         * 子节点的新增按钮事件
         * @param {*} row 
         */
        handleAddSon(row) {
            this.addWorkOrderDialogVisible = true;
            this.currParentId = row;
            console.log(this.currParentId);

        },
        /**
     * 条件搜索搜索按钮事件
     */
        handleSeach() {
            workorderRequest.list(this.searchWorkOrder, res => {
                this.workOrders = res.data;
            })
        },
        /**
         * 行编辑按钮事件
         * @param {*} row 整行数据
         */
        handleDelete(row) {
            workorderRequest.delete(row.workOrderId, res => {
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "删除成功"
                    });
                    this.loadWorkOrder(true);
                } else {
                    this.$message({
                        type: "error",
                        message: "删除失败"
                    });
                }
            })
        },
        /**
         * 条件搜索重置按钮事件
         */
        handleReset() {
            this.searchWorkOrder = {};
            this.loadWorkOrder(true);
        },
        /**
        * 加载页面数据
        */
        loadWorkOrder(isReal) {
            if (this.workOrders == undefined || this.workOrders.length == 0 || isReal) {
                workorderRequest.listTree(res => {
                    this.workOrders = res.data;
                })
            }
        },
        /**
     * 编辑按钮事件
     */
        handleEdit(row) {
            this.updateWorkOrderDialogVisible = true;
            workorderRequest.get(row.workOrderId, res => {
                this.updateWorkOrder = res.data;
            });
            this.loadWorkOrderBom(row.workOrderId);
        },
        /**
         * BOM组成操作步骤数据列表
         * @param {*} workOrderId 
         */
        loadWorkOrderBom(workOrderId) {
            workOrderBomRequest.list(workOrderId, res => {
                this.workOrderBoms = res.data;
            });
        },
        /**
     * 新增物料bom取消按钮事件
     */
        cancelAddBOM() {
            this.bomAddItemDialogVisible = false;
        },
        /**
     * 新增物料bom提交按钮事件
     */
        doAddBOM() {
            let table = this.$refs.addBOMTable; // 获取新增BOM的表格对象
            let rows = table.getSelectionRows(); // 通过API获取被选中的数据
            this.updateWorkOrder.productCode = rows[0].itemCode;
            this.updateWorkOrder.productName = rows[0].itemName;
            this.updateWorkOrder.unitOfMeasure = rows[0].unitOfMeasure;
            this.currItemId = rows[0].itemId;
            console.log(this.currItemId);
            this.addWorkOrder.productCode = rows[0].itemCode;
            this.addWorkOrder.productName = rows[0].itemName;
            this.addWorkOrder.unitOfMeasure = rows[0].unitOfMeasure;
            this.bomAddItemDialogVisible = false;
        },
        /**
        * 编辑生产工单提交按钮事件
        */
        doEditWorkOrder() {
            // 提交editRouteProduct即可
            workorderRequest.edit(this.updateWorkOrder, res => {
                // 这里的res就是我们的后端返回的perResult对象
                if (res.code == '200') {
                    this.$message({
                        message: '编辑用户成功',
                        type: 'success'
                    });
                    //关闭窗体
                    //this.updateWorkOrderDialogVisible = false;
                    // 重新加载数据
                    this.loadWorkOrder(true);
                    // 将updateWorkOrder制空
                    //this.updateWorkOrder = {};
                } else if (res.code == '300') {
                    this.$message({
                        message: '用户名重复',
                        type: 'warning',
                    });
                } else {
                    this.$message({
                        message: '编辑失败',
                        type: 'error',
                    });
                }
            });
        },
        /**
    * 取消编辑生产工单的按钮事件
    */
        cancelUpdateWorkOrder() {
            // 关闭窗体
            this.updateWorkOrderDialogVisible = false;
            // 清空newDict
            this.updateWorkOrder = {};
        },

        /**
   * 加载树菜单页面数据
   */
        loadItemType(isReal) {
            if (this.itemTypes == undefined || this.itemTypes.length == 0 || isReal) {
                itemTypeRequest.getAllItemTypes(res => {
                    this.itemTypes = res.data;
                })
            }
        },
        /**
         * 加载表格数据
         */
        loadItem() {
            itemRequest.list(this.page, this.limit, this.search, res => {
                this.items = res.data.list;
                this.total = res.data.total;
                this.maxPageNum = res.data.pages;
            })
        },
        /**
     * 取消新增生产工单的按钮事件
     */
        cancelAddWorkOrder() {
            // 关闭窗体
            this.addWorkOrderDialogVisible = false;
            // 清空newDict
            this.addWorkOrder = {};
        },
        /**
         * 新增生产工单的提交按钮事件
         */
        doAddWorkOrder() {
            this.addWorkOrder.status = "草稿";
            this.addWorkOrder.parentId = this.currParentId.workOrderId;
            console.log(this.addWorkOrder);
            this.addWorkOrder.productId = this.currItemId;
            workorderRequest.save(this.addWorkOrder, res => {
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "保存成功"
                    });
                    // 关闭窗体
                    this.cancelAddWorkOrder();
                    this.addWorkOrder = {},
                        this.currParentId = {},
                        // 重新加载数据
                        this.loadWorkOrder(true);// 加载当前页
                } else if (res.code == 300) {
                    this.$message({
                        type: "warning",
                        message: res.msg
                    });
                } else {
                    this.$message({
                        type: "error",
                        message: "保存失败"
                    });
                }
            });
        },

    },
    mounted() {
        this.loadWorkOrder();
        this.loadItemType();
        this.loadItem();
    }
}



</script>